<template>
  <el-dialog
    title="添加SKU"
    width="70%"
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
  >
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="skuItemList"
      height="65vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="name1" label="一级规格属性" align="center">
        <template slot="header" slot-scope="scope">
          <el-row>
            <el-col :span="24">一级规格属性</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">{{ colName1 || '--' }}</el-col>
          </el-row>
        </template>
        <template slot-scope="scope">
          {{ scope.row.name1 }}
        </template>
      </el-table-column>
      <el-table-column label="二级规格属性" align="center" prop="name2">
        <template slot="header" slot-scope="scope">
          <el-row>
            <el-col :span="24">二级规格属性</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">{{ colName2 || '--' }}</el-col>
          </el-row>
        </template>
        <template slot-scope="scope">
          {{ scope.row.name2 }}
        </template>
      </el-table-column>
      <el-table-column label="三级规格属性" align="center" prop="name3">
        <template slot="header" slot-scope="scope">
          <el-row>
            <el-col :span="24">三级规格属性</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">{{ colName3 || '--' }}</el-col>
          </el-row>
        </template>
        <template slot-scope="scope">
          {{ scope.row.name3 }}
        </template>
      </el-table-column>
    </el-table>


    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirmSelect">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  //商品Spu相关
  import {
    getSpecByServiceCodes
  } from "@/api/shop/goods";
  import { randomUUID } from "@/utils/index";

  export default {
    name: 'sku-item-multiple-selector-comp',
    components: {},
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      dialogVisible(val) {
        let params = {};
        params['servicesStr'] = this.servicesStr;
        params['specType'] = this.specType;
        this.getList(params)
      }
    },
    data() {
      return {
        loading: true,
        skuItemList: [],
        saleType: '',
        total: 0,
        // 查询参数
        servicesStr:'',
        specType:'',
        // 筛选
        serviceName:'',
        spuSpecName:'',
        skuStr:'',
        //列名
        colName1:'',
        colName2:'',
        colName3:'',
        // 显示搜索条件
        selectedItem: '', // 单选，选中的id
        multipleSelection: []
      };
    },
    created() {
      // this.init()
    },
    mounted() {},
    methods: {
      init: function() {

      },
      /**
       * 弹窗控制
       */
      closeDialog() {
        this.$emit('update:dialogVisible', false)
      },
      // 查询sku服务列表
      getList(params) {
        this.loading = true;
        getSpecByServiceCodes(params).then(response => {
          console.log(response)
          if (response.code === 200) {
            this.loading = false;

            this.skuItemList = [];
            for(let i=0;i<response.data.length;i++){
              let itemInfo = response.data[i];

              if(params.specType === '1'){
                if(itemInfo.name === this.spuSpecName){
                  this.initTbList(itemInfo);
                }
              }else{
                if(itemInfo.serviceName === this.serviceName && itemInfo.name === this.spuSpecName){
                  this.initTbList(itemInfo);
                }
              }
            }

            this.defaultSelectedList();
          }
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.multipleSelection  = selection;
      },
      /**
       * 确认选择
       */
      confirmSelect() {
        console.log('serviceName:' + this.serviceName + '  spuSpecName:' + this.spuSpecName);
        let params = {};
        params['multipleSelection'] = this.multipleSelection;
        params['serviceName'] = this.serviceName;
        params['spuSpecName'] = this.spuSpecName;

        this.$emit('confirm', params);
        this.closeDialog()
      },
      // 获取列表以后默认选中之前勾选的数据的逻辑
      defaultSelectedList(selectedList) {
        this.$nextTick(() => {
          //设置已选中sku items
          let skus = JSON.parse(this.skuStr);
          for(let i=0;i<skus.length;i++){
            let itemInfo = skus[i];
            for(let j=0;j<this.skuItemList.length;j++){
              let selectedItem = this.skuItemList[j];
              if(itemInfo.specs.length===3){
                if(itemInfo.name1 === selectedItem.name1 && itemInfo.name2 === selectedItem.name2 && itemInfo.name3 === selectedItem.name3){
                  console.log(this.skuItemList[j]);
                  this.$refs.multipleTable.toggleRowSelection(this.skuItemList[j], true);
                }
              }
              if(itemInfo.specs.length===2){
                if(itemInfo.name1 === selectedItem.name1 && itemInfo.name2 === selectedItem.name2){
                  console.log(this.skuItemList[j]);
                  this.$refs.multipleTable.toggleRowSelection(this.skuItemList[j], true);
                }
              }
              if(itemInfo.specs.length===1){
                if(itemInfo.name1 === selectedItem.name1){
                  console.log(this.skuItemList[j]);
                  this.$refs.multipleTable.toggleRowSelection(this.skuItemList[j], true);
                }
              }
            }
          }
        });
      },
      initTbList(itemInfo){
        let itemObj = {};
        itemObj['serviceName'] = itemInfo.serviceName;
        itemObj['name'] = itemInfo.name;
        itemObj['id'] = itemInfo.id;
        itemObj['skus'] = [];
        itemObj['specClassList'] = itemInfo.specClassList.concat();


        for(let j=0;j<3;j++){
          if(itemInfo.specClassList[j]){
            let specClassItem = itemInfo.specClassList[j];
            itemObj['name' + (j+1)] = specClassItem.name;

            this['colName' + (j+1)] = specClassItem.name || '--';
          }else{
            this['colName' + (j+1)] = '';
          }
        }

        for(let k=0;k<itemInfo.skuSpecVoList.length;k++){
          let skuSpecVoItem = itemInfo.skuSpecVoList[k];
          let newInfo = {
            id: null,
            uuid: randomUUID(),
            serviceCode: itemInfo.serviceCode || null,//服务code
            serviceName: itemInfo.serviceName || null,//服务Name
            isNeedSupplier: itemInfo.isNeedSupplier || null,//是否需要选择供应商
            name:  itemInfo.name,//商品规格属性名
            picUrl: "",//Sku图片
            marketPrice: 0.01,//市场价格
            androidSalesPrice: 0.01,//安卓价格
            iosSalesPrice: 0.01,//苹果价格
            // salesPrice: 0.01,//销售价格
            tobSalesPrice: 0.01,//销售价格-ToB
            stock: 0,//库存
            maxPurchaseNum: 1,//最大销售数量
            enable: "1",//是否有效 默认 1 有效， 0无效
            sort: 0,//排序
            // serviceCode: null,//冗余字段 用来查询 服务编码
            // serviceName: null,//冗余字段 用来查询 服务编码
            serviceGoodsId: null,//供应商商品ID
            unit: null,//计量单位
            number: 1,//数量
            name1: null,//属性组合1名称
            name2: null,//属性组合2名称
            name3: null,//属性组合3名称
            specs:[]//属性值 最多支持3个
          };

          for(let l=0;l<skuSpecVoItem.skuSpecValueVos.length;l++){
            let item = skuSpecVoItem.skuSpecValueVos[l];
            let no = l+ 1;
            if(!newInfo['name' + no]){
              newInfo['name' + no] = item.specValueName;
            }

            newInfo.specs.push({
              specValueId:item.specValueId,
              specValueName:item.specValueName,
              name: itemObj['name' + no]
            });
          }
          this.skuItemList.push(newInfo);
        }
      }
    }
  }
</script>
<style lang="scss">
  .select-top {
  .el-table__header .cell .el-checkbox__inner {
    display: none;
  }
  }
</style>
